<template>
    <div class="xc-map">
        <!-- <baidu-map
            :config="mapConfig"
            :data="mapData"
            @touchend="mapTouchEnd"
            @zoomstart="mapZoomStart"
            @zoomend="mapZoomEnd"
            @on-label-click="onMapLabelClick"
            @onMapvglIconClick="onMapvglIconClick"
            @onMapvglLabelClick="onMapvglLabelClick"
        ></baidu-map> -->
    </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, reactive, computed, watch, nextTick, onBeforeMount, onMounted, onActivated, onDeactivated } from 'vue';
import { useRouter } from 'vue-router';
// import mapvgl from 'mapvgl';
// import { Toast } from 'vant';
import Big from 'big.js';
import { store } from '@/store';
import BaiduMap from '@/components/BaiduMap/index.vue';
import { Marker, Label, Circle, MapvglPoint, MapvglIcon, MapvglIconData, MapvglLabel, MapvglLabelData, MapvglHeatmap, MapvglHeatmapData } from '@/components/BaiduMap/types';
import { Premises, Province, City } from './types';
import { emit } from 'process';
import MapglMgr from '../BaiduMap/MapglMgr';
import { onUnmounted } from 'vue';

const props = defineProps({
    queryType: {
        type: String,
        default: 'lbs',
    },
    queryProvince: {
        type: Array,
        default: () => {
            return [] as Array<Province>;
        },
    },
    queryCity: {
        type: Array,
        default: () => {
            return [] as Array<City>;
        },
    },
    queryPremises: {
        type: Array,
        default: () => {
            return [] as Array<Premises>;
        },
    },
    queryAddresses: {
        type: Array,
        default: () => {
            return [];
        },
    },
    distanceSelected: {
        type: Number,
        default: 3,
    },
});
const emit = defineEmits(['getCityPremisesList']);
const router = useRouter();
const storeApp = computed(() => {
    return store.state.app;
});
const storeHome = storeApp.value.home;
const storeSelectByTag = storeApp.value.selectByTag;
const storeSelectByJd = storeApp.value.selectByJd;
const mapConfigCity = computed(() => {
    if (props.queryType === 'tag' && storeSelectByTag?.checkedCityData.length) {
        return storeSelectByTag?.checkedCityData[0].name;
    }
    if (props.queryType === 'jd' && storeSelectByJd?.checkedCityData.length) {
        return storeSelectByJd?.checkedCityData[0].name;
    }
    return storeHome.selectCity.name;
});
const mapConfig = reactive({
    city: mapConfigCity.value,
    center: {
        lng: 0,
        lat: 0,
    },
    zoom: props.queryType === 'lbs' ? 12 : 7,
    minZoom: 5,
    maxZoom: 18,
    panBy: {
        x: 0,
        y: 0,
    },
    mapvgl: {
        pointLayerShow: true,
        iconLayerShow: true,
        labelLayerShow: true,
        heatmapLayerShow: true,
        isDynamicPointLayers: false,
        isDynamicIconLayers: false,
        isDynamicLabelLayers: true,
        isDynamicHeatmapLayers: false,
    },
    isDynamicShowOverlays: false,
});
const mapData = reactive({
    markers: [] as Array<Marker>,
    labels: [] as Array<Label>,
    circles: [] as Array<Circle>,
    mapvglPoints: [] as Array<MapvglPoint>,
    mapvglIcons: [] as Array<MapvglIcon>,
    mapvglLabels: [] as Array<MapvglLabel>,
    mapvglHeatmap: {
        options: {},
        data: [] as Array<MapvglHeatmapData>,
    } as MapvglHeatmap,
});

const countryZoom = 5;
const provinceZoom = 6;
const cityZoom = 8;
const cityAreaZoom = 11;
const buildingPointZoom = 14;
const buildingIconZoom = 13;
const buildingLabelZoom = 16;
let mapStartZoom = null;
let mapEndZoom = null;
let isNeedEchoHeatmapLayer = <boolean>false; // 是否需要回显热力图层
let currentProvince = reactive<Province>({
    provinceCode: '',
    provinceName: '',
    lng: 0,
    lat: 0,
    cityList: [],
    premisesCount: 0,
});
let currentCity = reactive<City>({
    cityCode: '',
    cityName: '',
    lng: 0,
    lat: 0,
    denseLng: 0,
    denseLat: 0,
    provinceCode: '',
    premisesList: [],
    premisesNum: 0,
});
let isMapLabelClick = <boolean>false;
let isGetCityPremisesList = <boolean>false;

// 对于label覆盖物，当数字位数超过limit时，显示成数字加K+的格式
const handleNumDisplay = (val: number, limit: number, position: number = 3, description: string = 'K+') => {
    let num = (val || 0).toString();
    if (num.length >= limit) {
        num = num.slice(0, num.length - position) + description;
    }
    return num;
};
const mapLabelStyle = {
    width: '70px',
    height: '70px',
    fontSize: '12px',
    color: '#fff',
    lineHeight: '17px',
    background: '#e60044',
    boxShadow: '2px 2px 4px 0 #6e002575',
    borderRadius: '50%',
    transform: 'translate(-50%, -50%)',
    border: 'none',
    cursor: 'pointer',
    // zIndex: '201',
};
const makeMapProvinceLabelData = () => {
    mapData.labels = props.queryProvince.map((province: Province) => {
        return {
            type: 'province',
            state: 'add',
            point: {
                lng: province.lng,
                lat: province.lat,
            },
            content: `
                <div class="width-height-full flex-column flex-center">
                    <span>${province.provinceName}</span>
                    <span>${handleNumDisplay(province.premisesCount, 6)}</span>
                </div>
            `,
            style: mapLabelStyle,
            data: province,
        }
    });
};
const makeMapCityLabelData = () => {
    let cityList = props.queryCity;
    if (props.queryProvince.length > 1) {
        const provinceFilter = props.queryProvince.find((province: Province) => {
            return province.provinceCode === currentProvince.provinceCode;
        }) as Province;
        cityList = provinceFilter.cityList;
    }
    mapData.labels = cityList.map((city: City) => {
        return {
            type: 'city',
            state: 'add',
            point: {
                lng: city.lng,
                lat: city.lat,
            },
            content: `
                <div class="width-height-full flex-column flex-center">
                    <span>${city.cityName}</span>
                    <span>${handleNumDisplay(city.premisesNum, 6)}</span>
                </div>
            `,
            style: mapLabelStyle,
            data: city,
        }
    });
};
const makeMapCircleData = () => {
    mapData.circles = props.queryAddresses.map(address => {
        return {
            point: {
                lng: address.longitude,
                lat: address.latitude,
            },
            radius: props.distanceSelected * 1000,
            options: {
                strokeColor: '#e60044', // 圆形边线颜色
                fillColor: '#e60044', // 圆形填充颜色，当参数为空时，圆形将没有填充效果
                strokeWeight: 1, // 圆形边线的宽度，以像素为单位
                strokeOpacity: 0.1, // 圆形边线透明度，取值范围 0-1
                fillOpacity: 0.1, // 圆形填充的透明度，取值范围 0-1
                strokeStyle: 'solid', // 圆形边线的样式，solid或dashed
            },
        };
    });
};
const clearMapData = () => {
    mapData.markers = [];
    mapData.labels = [];
    mapData.circles = [];
};
const makeMapvglPointData = (premisesList: Array<Premises>) => {
    mapData.mapvglPoints = [{
        options: {
            color: '#e60044',
            shape: 'circle', // 默认为圆形，可传square改为正方形
            size: 10,
            renderOrder: 2,
        },
        data: premisesList.map((premises: Premises) => {
            return {
                lng: premises.lng || 0,
                lat: premises.lat || 0,
            };
        }),
    }];
};
const makeMapvglIconData = (premisesList: Array<Premises>) => {
    mapData.mapvglIcons = [{
        img: new URL('../../assets/img/map-building-icon.png', import.meta.url).href,
        width: 32,
        height: 32,
        data: premisesList.map((premises: Premises) => {
            return {
                id: premises.id,
                name: premises.name,
                lng: premises.lng,
                lat: premises.lat,
            };
        }),
    }];
};
const makeMapvglLabelData = (premisesList: Array<Premises>) => {
    mapData.mapvglLabels = [{
        options: {
            textAlign: 'center',
            textColor: '#fff',
            borderColor: '#e60044',
            backgroundColor: '#e60044',
            pickedTextColor: '#fff',
            pickedBorderColor: '#e60044',
            pickedBackgroundColor: '#e60044',
            padding: [4, 8],
            borderRadius: 4,
            fontSize: 10,
            lineHeight: 10,
            renderOrder: 2,
        },
        data: premisesList.map((premises: Premises) => {
            return {
                id: premises.id,
                name: premises.name,
                lng: premises.lng || 0,
                lat: premises.lat || 0,
                text: premises.name || '',
            };
        }),
    }];
};
// 热力图配置项
const makeMapvglHeatmapData = (premisesList: Array<Premises>) => {
    mapData.mapvglHeatmap = {
        options: {
            size: 60, // 单个点绘制大小
            max: 1, // 最大阈值
            height: 0, // 最大高度，默认为0
            unit: 'px', // 单位，m:米，px: 像素
            renderOrder: 1,
            gradient: {
                0.2: 'rgba(0, 0, 255, 0.5)',
                0.3: 'rgba(0, 94, 255, 0.6)',
                0.4: 'rgba(0, 255, 0, 0.6)',
                0.5: 'rgba(163, 255, 0, 0.65)',
                0.6: 'rgba(223, 255, 0, 0.65)',
                0.7: 'rgba(255, 255, 0, 0.8)',
                0.8: 'rgba(255, 183, 0, 0.8)',
                0.9: 'rgba(255, 81, 20, 0.8)',
                1: 'rgba(255, 0, 0, 0.65)'
            },
        },
        data: premisesList.map((premises: Premises) => {
            return {
                lng: premises.lng || 0,
                lat: premises.lat || 0,
                count: premises.count || 0,
            };
        }),
    };
    nextTick(() => {
        mapConfig.center = {
            lng: currentCity.denseLng || currentCity.lng,
            lat: currentCity.denseLat || currentCity.lat,
        };
    });
};
watch(() => props.queryProvince, () => {
    clearMapData();
    clearMapvglData();
    if (isGetCityPremisesList) {
        if (['tag', 'jd'].includes(props.queryType)) {
            const currentProvinceNew = props.queryProvince.find((province: Province) => {
                return province.provinceCode === currentProvince.provinceCode;
            }) as Province;
            const currentCityNew = currentProvinceNew.cityList.find((city: City) => {
                return city.cityCode === currentCity.cityCode;
            }) as City;
            Object.assign(currentProvince, currentProvinceNew);
            Object.assign(currentCity, currentCityNew);
            makeMapvglPointData(currentCity.premisesList);
            makeMapvglHeatmapData(currentCity.premisesList);
            mapConfig.zoom = buildingPointZoom;
            mapConfig.mapvgl.pointLayerShow = true;
            mapConfig.mapvgl.heatmapLayerShow = true;
        }
        isGetCityPremisesList = false;
        return;
    }
    mapConfig.zoom = provinceZoom;
    mapConfig.minZoom = countryZoom;
    if (props.queryProvince.length) {
        let centerProvince = {
            provinceCode: '',
            provinceName: '',
            lng: 0,
            lat: 0,
            cityList: [],
            premisesCount: 0,
        } as Province;
        for (let i = 0; i < props.queryProvince.length; i++) {
            const province = props.queryProvince[i] as Province;
            if (centerProvince.provinceCode === '' || +province.provinceCode < +centerProvince.provinceCode) {
                centerProvince = province;
            }
        }
        nextTick(() => {
            mapConfig.center = {
                lng: centerProvince.lng,
                lat: centerProvince.lat,
            };
        });
    }
    makeMapProvinceLabelData();
});
watch(() => props.queryCity, () => {
    clearMapData();
    clearMapvglData();
    if (isGetCityPremisesList) {
        if (['tag', 'jd'].includes(props.queryType)) {
            const currentCityNew = props.queryCity.find((city: City) => {
                return city.cityCode === currentCity.cityCode;
            }) as City;
            Object.assign(currentCity, currentCityNew);
            makeMapvglPointData(currentCity.premisesList || []);
            makeMapvglHeatmapData(currentCity.premisesList || []);
            mapConfig.zoom = buildingPointZoom;
            mapConfig.mapvgl.pointLayerShow = true;
            mapConfig.mapvgl.heatmapLayerShow = true;
        }
        isGetCityPremisesList = false;
        return;
    }
    mapConfig.zoom = props.queryCity.length > 1 ? cityZoom : buildingPointZoom;
    mapConfig.minZoom = cityZoom;
    if (props.queryCity.length) {
        nextTick(() => {
            mapConfig.center = {
                lng: props.queryCity[0].lng,
                lat: props.queryCity[0].lat,
            };
        });
    }
    if (mapConfig.zoom === cityZoom) {
        makeMapCityLabelData();
    }
    if (mapConfig.zoom === buildingPointZoom && currentCity.cityCode) {
        const currentCityNew = props.queryCity.find((city: City) => {
            return city.cityCode === currentCity.cityCode;
        });
        Object.assign(currentCity, currentCityNew);
        makeMapvglPointData(currentCity.premisesList);
        makeMapvglHeatmapData(currentCity.premisesList);
    }
});
watch(() => props.queryPremises, () => {
    clearMapData();
    clearMapvglData();
    if (props.queryType === 'lbs') {
        let latestSelectedAddress = {
            lng: 0,
            lat: 0,
        };
        if (props.queryAddresses.length) {
            latestSelectedAddress = {
                lng: props.queryAddresses[props.queryAddresses.length - 1].longitude,
                lat: props.queryAddresses[props.queryAddresses.length - 1].latitude,
            };
        }
        mapConfig.zoom = buildingIconZoom;
        mapConfig.minZoom = buildingIconZoom - 1;
        nextTick(() => {
            makeMapCircleData();
            makeMapvglIconData(props.queryPremises);
            mapConfig.center = {
                lng: latestSelectedAddress.lng,
                lat: latestSelectedAddress.lat,
            };
        });
    }
});
watch(() => props.distanceSelected, () => {
    mapData.circles = mapData.circles.map(circle => {
        circle.radius = props.distanceSelected * 1000;
        return circle;
    });
});
watch(() => currentProvince.provinceCode, () => {
    // 如果当前城市所属省份是直辖市省份，则不展示城市Label，直接进入直辖市的海量点热力图
    if (directlyUnderCityProvinceCodes.includes(currentProvince.provinceCode)) {
        const currentProvinceCenter = {
            lng: currentProvince.lng,
            lat: currentProvince.lat,
        }
        getCurrentCity(currentProvinceCenter);
        mapConfig.zoom = buildingPointZoom;
        MapglMgr.Instance().refreshConfig(mapConfig);
    }
    // mapData.labels = mapData.labels.map((label: Label) => {
    //     if (label.type === 'city') {
    //         label.state = 'remove';
    //     }
    //     return label;
    // });
});
watch(() => currentCity.cityCode, () => {
    mapData.mapvglPoints = [];
    mapData.mapvglHeatmap.data = [];
    mapData.mapvglLabels = [];
});

// 直辖市省份code数组
const directlyUnderCityProvinceCodes = ['110000', '120000', '310000', '500000'] as Array<string>;
const getCurrentProvince = (center: { lng: number; lat: number; }) => {
    let nearestProvince = {} as Province;
    let coordinateDifference = <number>0;
    for (let i = 0; i < props.queryProvince.length; i++) {
        const province = props.queryProvince[i] as Province;
        const lngDifference = Math.abs(new Big(province.lng).minus(center.lng).toNumber());
        const latDifference = Math.abs(new Big(province.lat).minus(center.lat).toNumber());
        const coordinateDifferenceNew = new Big(lngDifference).plus(latDifference).toNumber();
        if (i === 0 || coordinateDifferenceNew < coordinateDifference) {
            coordinateDifference = coordinateDifferenceNew;
            nearestProvince = province;
        }
    };
    Object.assign(currentProvince, nearestProvince);
};
const getCurrentCity = (center: { lng: number; lat: number; }) => {
    let nearestCity = {} as City;
    let coordinateDifference = <number>0;
    let cityList = props.queryCity as Array<City>;
    if (props.queryProvince.length > 1) {
        cityList = currentProvince.cityList;
    }
    for (let i = 0; i < cityList.length; i++) {
        const city = cityList[i] as City;
        const lngDifference = Math.abs(new Big(city.lng).minus(center.lng).toNumber());
        const latDifference = Math.abs(new Big(city.lat).minus(center.lat).toNumber());
        const coordinateDifferenceNew = new Big(lngDifference).plus(latDifference).toNumber();
        if (i === 0 || coordinateDifferenceNew < coordinateDifference) {
            coordinateDifference = coordinateDifferenceNew;
            nearestCity = city;
        }
    };
    Object.assign(currentCity, nearestCity);
};
const goBuildingDetail = (buildingId: string | number) => {
    router.push({
        name: 'onePage',
        query: {
            buildingId: buildingId || '',
        },
    });
};
const onMapLabelClick = (e) => {
    isMapLabelClick = true;
    if (e.type === 'province') {
        mapConfig.zoom = cityZoom;
        Object.assign(currentProvince, e.data);
        if (currentProvince.cityList.length) {
            let centerCity = {
                cityCode: '',
                cityName: '',
                lng: 0,
                lat: 0,
                provinceCode: '',
                premisesList: [],
                premisesNum: 0,
            } as City;
            for (let i = 0; i < currentProvince.cityList.length; i++) {
                const city = currentProvince.cityList[i];
                if (centerCity.cityCode === '' || +city.cityCode < +centerCity.cityCode) {
                    centerCity = city;
                }
            }
            nextTick(() => {
                mapConfig.center = {
                    lng: centerCity.lng,
                    lat: centerCity.lat,
                };
            });
        } else {
            nextTick(() => {
                mapConfig.center = e.point;
            });
        }
    }
    if (e.type === 'city') {
        mapConfig.zoom = buildingPointZoom;
        Object.assign(currentCity, e.data);
        nextTick(() => {
            mapConfig.center = e.point;
        });
    }
};
const onMapvglIconClick = (e) => {
    const mapvglIconData = e.dataItem.mapvglIconData as MapvglIconData;
    goBuildingDetail(mapvglIconData.id);
};
const onMapvglLabelClick = (e) => {
    const mapvglLabelData = e.dataItem.mapvglLabelData as MapvglLabelData;
    goBuildingDetail(mapvglLabelData.id);
};
const clearMapvglData = () => {
    mapData.mapvglPoints = [];
    mapData.mapvglIcons = [];
    mapData.mapvglLabels = [];
    mapData.mapvglHeatmap.data = [];
};
const showOrHideMapvglLayers = (type: string) => {
    if (type === 'show') {
        mapConfig.mapvgl.pointLayerShow = true;
        mapConfig.mapvgl.iconLayerShow = true;
        mapConfig.mapvgl.labelLayerShow = true;
        mapConfig.mapvgl.heatmapLayerShow = true;
    }
    if (type === 'hide') {
        mapConfig.mapvgl.pointLayerShow = false;
        mapConfig.mapvgl.iconLayerShow = false;
        mapConfig.mapvgl.labelLayerShow = false;
        mapConfig.mapvgl.heatmapLayerShow = false;
    }
};

const mapTouchEnd = ({ e, zoom, isMultiFingerTouch }) => {

    console.log('mapTouchEnd');
    // 当地图缩放到最大级别，再次双指缩放地图，且地图上存在mapvglLabel图层时，让地图在水平位置上偏移1px
    // 解决地图缩放到最大级别，再次双指缩放地图，导致地图回弹后，第一次点击楼盘标签无法准确触发楼盘标签的点击事件，导致无法跳转楼盘详情的问题

    if (mapConfig.mapvgl.labelLayerShow && zoom === mapConfig.maxZoom && isMultiFingerTouch) {
        mapConfig.panBy = {
            x: 1,
            y: 0,
        };
    }
};
const mapZoomStart = (zoom: number) => {
    mapStartZoom = zoom;
};
const mapZoomEnd = ({ zoom, center }) => {

    showOrHideMapvglLayers('hide');
    mapEndZoom = zoom;
    const midZoom = props.queryType === 'lbs' ? buildingIconZoom : buildingPointZoom;
    // if (mapEndZoom < midZoom && mapEndZoom > cityZoom) {
    //     if (mapEndZoom < mapConfig.zoom) {
    //         mapConfig.zoom = cityZoom;
    //         return;
    //     }
    //     mapConfig.zoom = midZoom;
    //     return;
    // }
    if (mapEndZoom > midZoom && mapEndZoom < buildingLabelZoom) {
        if (mapEndZoom > mapConfig.zoom) {
            mapConfig.zoom = buildingLabelZoom;
            return;
        }
        mapConfig.zoom = midZoom;
        return;
    }
    mapConfig.zoom = mapEndZoom;
    if (props.queryType === 'lbs') {
        // 显示楼盘标签
        if (mapEndZoom >= buildingLabelZoom) {
            mapConfig.mapvgl.labelLayerShow = true;
            // 显示楼盘标签时，让地图在水平位置上偏移1px
            // 解决地图缩放后，第一次点击楼盘标签无法准确触发楼盘标签的点击事件，导致无法跳转楼盘详情的问题
            mapConfig.panBy = {
                x: 1,
                y: 0,
            };
            if (!mapData.mapvglLabels.length) {
                nextTick(() => {
                    makeMapvglLabelData(props.queryPremises);
                });
            }
            return;
        }
        // 显示楼盘图标
        if (mapEndZoom >= buildingIconZoom - 1) {
            mapConfig.mapvgl.iconLayerShow = true;
            if (!mapData.circles.length) {
                nextTick(() => {
                    makeMapCircleData();
                });
            }
            if (!mapData.mapvglIcons.length) {
                nextTick(() => {
                    makeMapvglIconData(props.queryPremises);
                });
            }
            return;
        }
    }

    if (['tag', 'jd'].includes(props.queryType)) {

        // 显示楼盘标签
        if (mapEndZoom >= buildingLabelZoom) {
            mapConfig.mapvgl.labelLayerShow = true;
            // 显示楼盘标签时，让地图在水平位置上偏移1px
            // 解决地图缩放后，第一次点击楼盘标签无法准确触发楼盘标签的点击事件，导致无法跳转楼盘详情的问题
            mapConfig.panBy = {
                x: 1,
                y: 0,
            };
            if (!mapData.mapvglLabels.length) {
                nextTick(() => {
                    makeMapvglLabelData(currentCity.premisesList);
                });
            }
            return;
        }
        // 显示楼盘海量点
        if (mapEndZoom >= buildingPointZoom - 2) {
            mapData.labels = [];
            if (!isMapLabelClick) {
                getCurrentCity(center);
                isMapLabelClick = false;
            }
            // mapData.labels = mapData.labels.map((label: Label) => {
            //     label.state = 'hide';
            //     return label;
            // });



            if (!currentCity.premisesList || !currentCity.premisesList.length) {
                isGetCityPremisesList = true;
                emit('getCityPremisesList', currentCity);
                return;
            }
            mapConfig.mapvgl.pointLayerShow = true;
            mapConfig.mapvgl.heatmapLayerShow = true;

            if (!mapData.mapvglPoints.length) {



                nextTick(() => {
                    makeMapvglPointData(currentCity.premisesList);
                });
            }
            if (!mapData.mapvglHeatmap.data.length) {
                nextTick(() => {
                    makeMapvglHeatmapData(currentCity.premisesList);
                });
            }
            return;
        }

        // 显示城市
        if (mapEndZoom >= cityZoom) {
            // clearMapvglData();
            if (!isMapLabelClick) {
                getCurrentProvince(center);
                isMapLabelClick = false;
            }
            // mapData.labels = mapData.labels.map((label: Label) => {
            //     if (label.type === 'province') {
            //         label.state = 'hide';
            //     }
            //     if (label.type === 'city') {
            //         label.state = 'show';
            //     }
            //     return label;
            // });
            // const mapCityLabels = mapData.labels.filter((label: Label) => {
            //     return label.type === 'city';
            // });
            // if (!mapCityLabels.length) {
            //     nextTick(() => {
            //         makeMapCityLabelData();
            //     });
            // }
            mapData.labels = [];
            nextTick(() => {
                makeMapCityLabelData();
            });
            return;
        }
        // 显示省份
        if (mapEndZoom >= provinceZoom) {
            // clearMapvglData();
            // mapData.labels = mapData.labels.map((label: Label) => {
            //     if (label.type === 'province') {
            //         label.state = 'show';
            //     }
            //     if (label.type === 'city') {
            //         label.state = 'hide';
            //     }
            //     return label;
            // });
            // const mapProvinceLabels = mapData.labels.filter((label: Label) => {
            //     return label.type === 'province';
            // });
            // if (!mapProvinceLabels.length) {
            //     nextTick(() => {
            //         makeMapProvinceLabelData();
            //     });
            // }
            mapData.labels = [];
            nextTick(() => {
                makeMapProvinceLabelData();
            });
            return;
        }
    }


};

onBeforeMount(() => { });


//监听数据变化时 更新地图
watch(mapConfig, () => {
    //console.error('mapConfig refresh');
    //MapglMgr.Instance().refreshConfig(mapConfig);
}, {
    deep: true
});
watch(()=>mapData, () => {
    //console.error('mapData refresh');
    //console.log('mapvglHeatmap 变化',mapData.mapvglHeatmap);
    //MapglMgr.Instance().refreshData(mapData);
}, {
    deep: true
});

onMounted(() => {

    console.log('xcmap...mounted')
    //直接调用函数展示百度地图
    MapglMgr.Instance().renderMap(mapConfig, mapData, {
        zoomend: mapZoomEnd,
        touchend: mapTouchEnd,
        zoomstart: mapZoomStart,
        onLabelClick: onMapLabelClick,
        onMapvglIconClick: onMapvglIconClick,
        onMapvglLabelClick: onMapvglLabelClick
    });
});

onUnmounted(() => {
    MapglMgr.Instance().hideBaiduMap();
})
onActivated(() => {
});
onDeactivated(() => {

    //离开地图页面时，若热力图图层为显示状态，则隐藏热力图图层，并将地图缩放回城市级别，以此来避免，页面缓存后，从下一个页面跳转回地图页面时，热力图图层全白的问题
    if (mapConfig.mapvgl.heatmapLayerShow) {
        mapConfig.mapvgl.heatmapLayerShow = false;
        mapConfig.zoom = cityZoom;
        isNeedEchoHeatmapLayer = true;
    }


});
</script>

<style lang="scss" scoped>
.xc-map {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
</style>
